import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styles from './SalaryList.module.css'
import { Popconfirm, Space, Table } from 'antd'
import AdminEditUserInfoModal from '../AdminEditUserInfoModal'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { adminDeleteUserAsync, setUserByAdminAsync } from '../../../../_redux/actions_async'

const data = [
  {
    userId: 1,
    username: 1,
    name: 1,
    age: 1,
    gender: 1,
    phone: 1,
    department: 1,
    departmentId: 1,
    del: 1,
    registerTime: 1,
    email: 1,
  }
]

class UserList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showModal: false,
      UserList: [],
      editUserId: -1
    }
  }

  componentWillMount () {

    this.columns = [
      {
        title: 'Id',
        dataIndex: 'userId',
      },
      {
        title: '用户名',
        dataIndex: 'username',
      },
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age'
      },
      {
        title: '性别',
        dataIndex: 'gender'
      },
      {
        title: '手机号',
        dataIndex: 'phone',
      },
      {
        title: '所属部门',
        dataIndex: 'department'
      },
      {
        title: '所属部门Id',
        dataIndex: 'departmentId'
      },
      {
        title: '用户是否被删除',
        dataIndex: 'del'
      },
      {
        title: '邮箱',
        dataIndex: 'email'
      },
      {
        title: '注册时间',
        dataIndex: 'registerTime'
      },
      {
        title: '操作',
        dataIndex: 'option',
        render: (text, record) =>
          this.props.userList.length >= 1 ? (
            <Space>
              <Popconfirm title="操作" onConfirm={() => this.handleDelete(record.userId)}>
                <a>删除</a>
              </Popconfirm>
              <a onClick={() => this.handleEdit(record.userId)}>编辑</a>
            </Space>
          ) : null
      },
      {
        title: '查看薪资',
        dataIndex: 'salary',
        render: (text, record) => <Link to={`/admin/salary/${record.userId}`}>查看薪资</Link>
      }
    ]
  }

  componentDidMount () {

  }

  componentWillReceiveProps (nextProps, nextContext) {
    // console.log(this.props.userList)
    // this.setState({
    //   userList: nextProps
    // })
  }

  handleDelete = userId => {
    this.props.adminDeleteUserAsync(userId)
  }

  handleEdit = userId => {
    this.setState({ showModal: true, editUserId: userId })
  }

  handleCancel = () => {
    this.setState({ showModal: false })
  }

  handleFinish = form => {
    let { editUserId: userId } = this.state
    this.props.setUserByAdminAsync({ ...form, userId })
  }

  render () {
    return (
      <div className={styles.container}>
        <Table
          columns={this.columns}
          dataSource={this.props.userList}
          bordered
          title={() => '用户列表'}
        />
        <AdminEditUserInfoModal handleCancel={this.handleCancel} visible={this.state.showModal}
                                handleFinish={this.handleFinish}/>
      </div>
    )
  }
}

UserList.propTypes = {}

UserList = connect(
  () => ({}),
  { adminDeleteUserAsync, setUserByAdminAsync }
)(UserList)

export default UserList
